<template>
  <div>
    <el-form :model="drugHistory" :rules="dataRule" ref="dataForm" label-width="120px">
      <el-form-item label="药品名称" prop="drugName">
        <el-select
          style="width: 230px;"
          allow-create
          filterable
          multiple
          v-model="drugName"
          placeholder="请选择/输入药品名称"
          @change="getDrugName"
        >
          <el-option v-for="(item, index) in dict.type.patient_info_drug_name"
           :key="index" :label="item.label" :value="item.label">
           </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="药物分类" prop="drugType">
        <el-select               
          allow-create
          filterable 
          style="width: 230px;" 
          v-model="drugHistory.drugType"
          placeholder="请选择药物分类"
        >
          <el-option v-for="(item, index) in dict.type.patient_info_drug_type" :key="index" :label="item.label" :value="item.label"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="药物用法" prop="drugUsage">
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          show-word-limit
          maxlength="300"
          v-model="drugHistory.drugUsage"
          placeholder="请输入药物用法[用法、用量]"
        ></el-input>
      </el-form-item>

      <el-form-item label="使用日期" prop="drugUseTime">
        <el-date-picker
          style="width:320px;"
          @change="drugUseTimeChange"
          v-model="drugTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="是否继续" v-if="hasContinue">
        <el-switch :active-value="1" :inactive-value="0" v-model="drugHistory.isContinue"></el-switch>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "DrugHistory",
  dicts: ["patient_info_drug_name", "patient_info_drug_type"],
  components: {},
  props: {
    hasContinue: {
      type: Boolean,
      required: true
    }
  },
  data() {
    //这里存放数据
    return {
      drugName: [],
      drugTime: [],
      drugHistory: {
        isContinue: 0,
        drugName: "",
        drugType: "",
        drugUsage: "",
        endTime: "",
        startTime: ""
      },
      dataRule: {
        drugName: [
          {
            validator: (rule, value, callback) => {
              if (!this.drugHistory.drugName) {
                callback(new Error("药品名称必须选择"));
              } else {
                callback();
              }
            },
            required: true,
            trigger: ["blur", "change"]
          }
        ],
        drugType: [
          {
            required: true,
            message: "药物分类必须选择",
            trigger: ["blur", "change"]
          }
        ],
        drugUsage: [
          {
            required: true,
            message: "药物用法必须填写",
            trigger: "blur"
          }
        ],
        drugUseTime: [
          {
            validator: (rule, value, callback) => {
              if (!this.drugHistory.startTime || !this.drugHistory.endTime) {
                callback(new Error("药物使用时间必须选择"));
              } else {
                callback();
              }
            },
            required: true,
            trigger: ["blur", "change"]
          }
        ]
      }
    };
  },

  //方法集合
  methods: {
    // 更新放入数据
    putDrugHistory(value) {
      this.drugHistory = value;
      this.drugTime.push(value.startTime);
      this.drugTime.push(value.endTime);
      this.drugName = value.drugName.split("/");
    },
    // 药品名称选择改变
    getDrugName(value) {
      this.drugHistory.drugName = "";
      if (value != null && value.length > 0) {
        for (let i = 0; i < value.length - 1; i++) {
          this.drugHistory.drugName += value[i] + "/";
        }
        this.drugHistory.drugName += value[value.length - 1];
      }
    },
    // 药物使用日期选择
    drugUseTimeChange(value) {
      if (value != null && value.length == 2) {
        this.drugHistory.startTime = value[0];
        this.drugHistory.endTime = value[1];
      } else if (value == null) {
        this.drugHistory.startTime = null;
        this.drugHistory.endTime = null;
        this.drugTime = null;
      }
    },
    submit(value) {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          // 调用父组件的赋值方法
          if (value == "koaDrugHistory") {
            // 如果父组件传来的是‘koaDrugHistory’，说明是koa
            this.drugHistory.isKoa = 1;
          } else {
            this.drugHistory.isKoa = 0;
          }
        }
      });
      if (this.drugHistory.isKoa == 0 || this.drugHistory.isKoa == 1) {
        return this.drugHistory;
      } else {
        return null;
      }
    }
  }
};
</script>
